<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ taglib uri="http://hol.com/functions" prefix="hfn"%>
<c:set var="base" value="${pageContext.request.contextPath}"></c:set>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>联盟论坛</title>
<link type="text/css" rel="stylesheet" href="${base}/foreground/css/bootstrap.css" >
<link type='text/css' rel='stylesheet' href="${base}/foreground/css/style.css" />
<link type="text/css" rel="stylesheet" href="${base}/res/layui/css/layui.css">
<style type="text/css">
	*{
		margin:0px;
		padding:0px;
	}
	.nav>li>a:focus,.nav>li>a:hover{
		background-color:#000000;
	}
	.nav .open>a,.nav .open>a:focus,.nav .open>a:hover{
		background-color: #000000;
	} 
	.navbar-nav>li>.dropdown-menu{
		background-color: #000000;
	}
	.dropdown-menu>li>a{
		color:#fff;
	}
	#current_user{
		color: #fff;
	}
	.caret{
		color: #fff;
	}
	.modal-body table>tbody>tr>td{
		    padding: 8px;
    line-height: 1.42857143;
    vertical-align: middle;
    border-top: 1px solid #ddd;
    cursor: pointer;
	}
</style>

</head>
<body >
<div class="header">
	<div class="container">
		<div class="logo">
			<a href="index.jsp"><img src="${base}/foreground/images/logo.png" alt=""></a>
		</div>
	
		<div class="navigation">
			<ul class="navig cl-effect-3" style="float:left; width:400px">
				<li><a href="${base }/foreground/index.jsp">首页</a></li>
				<li><a href="${base }/foreground/hero.jsp">英雄资料</a></li>
				<li><a href="${base }/foreground/blog.jsp">联盟论坛</a></li>
				<li><a href="${base }/foreground/index.jsp">关于</a></li>
			</ul>
			<c:choose>
				<c:when test="${sessionScope.userName==null}">
					<ul class="navig cl-effect-3" style="float:right; width:200px">
						<li><a href="${base }/loginsystem/index.jsp">登录OR注册</a></li>
					</ul>
				</c:when>
				<c:otherwise>
						<div class="collapse navbar-collapse"
							id="bs-example-navbar-collapse-1">
							<ul class="nav navbar-nav navbar-right">
								<li class="dropdown"><a href="#" class="dropdown-toggle"
									data-toggle="dropdown" role="button" aria-haspopup="true"
									aria-expanded="false"><span id="current_user"><img
											src="${sessionScope.userPic }" style="width: 40px;height: 40px;border-radius: 50%">${sessionScope.userName}</span>
										<span class="caret"></span></a>
									<ul class="dropdown-menu" style="cursor: pointer">
										<li><a data-toggle="modal" data-target="#myInfo">个人信息</a></li>
										<li><a data-toggle="modal" data-target="#myArticle">我的文章</a></li>
										<li><a data-toggle="modal" data-target="#modifyPassword">修改密码</a></li>
										<li role="separator" class="divider"></li>
										<li><a href="${base }/action/login/exit">退出登录</a></li>
									</ul></li>
							</ul>
						</div>
					</c:otherwise>
			</c:choose>
		</div>
	</div>
</div>
	<div class="games">
		<div class="container">
			<div class="page-path">
				<ul class="path-list">
					<li><a href="${base }/foreground/index.jsp">首页</a></li>
					<li>&nbsp;&nbsp;/&nbsp;&nbsp;</li>
					<li><a href="${base }/foreground/blog.jsp">联盟资讯</a></li>
					<li>&nbsp;&nbsp;/&nbsp;&nbsp;</li>
					<li class="act">Details</li>
				</ul>
				<p>
					<a href="index.jsp">Back to 首页</a>
				</p>
				<div class="clearfix"></div>
			</div>
			<h3 class="page-header">文章</h3>
			<div class="blog-content" style="width: 68%; float: left">
				<div class="blog-post">
					<h3>
						<a href="#">${article.artTitle }</a>
					</h3>
					<div class="post-details">
						<p>
							Posted By <a href="#">${article.user.userName }</a> &nbsp;&nbsp;
							On <span>${article.artDate }</span> &nbsp;&nbsp; Comments<span>(10)</span>
						</p>
					</div>
					<img src="${article.artTitPic }" alt="">
					<p>${article.artContent }</p>
				</div>

				<div class="comment-box">
					<h3 class="page-header">发表评论</h3>
					<form action="${base }/action/comment/add" method="get" onsubmit="return checkform()">
					<input type="hidden" name="userId" value="${sessionScope.userId }" >
					<input type="hidden" name="artId" value="${article.artId }" >
					<div class="text-cmt">
						<textarea name="content" placeholder="既然来了，不说两句"></textarea>
					</div>
					<div class="text-cmt">
						<input type="submit">
					</div>
					</form>
				</div>
				<h3 class="page-header">全部评论</h3>
				<ul class="list-cont" id="list-cont" style="height: 620px"></ul>
				<div id="demo" style="text-align: center;"></div>
			</div>
			<div class="blog-sidebar" style="width: 30%; float: right">
				<h3 class="page-header">分类</h3>
				<ul class="product-categories color">
					<c:forEach var="d" items="${hfn:dict('文章类型')}" varStatus="idx">
						<li class="cat-item cat-item-60"><a href="#">${d.itemValue}</a><span
							class="count">(2)</span></li>
					</c:forEach>

				</ul>
			</div>
			<div class="clearfix"></div>
			
		</div>
	</div>
	<!-- 显示个人信息的模态框 -->
	<div class="modal fade" id="myInfo" tabindex="-1" role="dialog"
		aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog" style="max-width: 450px">
			<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal"
							aria-hidden="true">&times;</button>
						<h4 class="modal-title" id="myModalLabel">我的个人信息</h4>
					</div>
					<div class="modal-body" style="height: 280px">
						<iframe id="userInformation" width="100%" height="100%" frameborder="0" src="${base}/foreground/person_form.jsp"></iframe>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal" id="closeWin">关闭</button>
						<button type="button" class="btn btn-primary" id="subIframe">更改信息</button>
					</div>
			</div>
			<!-- /.modal-content -->
		</div>
		<!-- /.modal -->
	</div>
	
<!-- 显示我的文章模态框 -->
	<div class="modal fade" id="myArticle" tabindex="-1" role="dialog"
		aria-labelledby="myModalLabel" aria-hidden="true" style=" top: 35%;left: 40%;
            transform: translate(-50%,-50%);
             min-width:60%;
             overflow: visible;">
		<div class="modal-dialog" style="width: 1000px" >
			<div class="modal-content" >
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal"
							aria-hidden="true">&times;</button>
						<h4 class="modal-title" id="myModalLabel">我的文章</h4>
					</div>
					<div class="modal-body" style="height: 500px">
						<iframe id="article_list" width="100%" height="100%" frameborder="0" src="${base}/foreground/article_list.jsp"></iframe>
					</div>
			</div>
			<!-- /.modal-content -->
		</div>
		<!-- /.modal -->
	</div>
	<!-- 修改密码模态框 -->
	<div class="modal fade" id="modifyPassword" tabindex="-1" role="dialog"
		aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog" style="max-width: 450px">
			<div class="modal-content">
				<form action="${base}/action/user/modPassword" method="post" autocomplete="off" draggable="false" id="modPassword">
					<input type="hidden" name="id" value="${sessionScope.userId }">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal"
							aria-hidden="true">&times;</button>
						<h4 class="modal-title" id="myModalLabel">修改密码</h4>
					</div>
					<div class="modal-body">
						<table style="width: 100%">
							<tbody>
								<tr>
									<td width="30%">输入当前密码:</td>
									<td width="70%"><input type="password" class="form-control" name="oldPassword" id="oldPassword">
									</td>
								</tr>
								<tr>
									<td width="30%">输入新密码:</td>
									<td width="70%"><input type="password" class="form-control" name="newPassword" id="newPassword">
									</td>
								</tr>
								<tr>
									<td width="30%">确认新密码:</td>
									<td width="70%"><input type="password" class="form-control" name="passwordAgain" id="passwordAgain">
									</td>
								</tr>
							</tbody>
						</table>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
						<button type="button" class="btn btn-primary" onclick="checkPassword()">提交更改</button>
					</div>
				</form>
			</div>
			<!-- /.modal-content -->
		</div>
		<!-- /.modal -->
	</div>
	<script type="text/javascript" src="${base}/foreground/js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="${base}/foreground/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="${base}/res/layui/layui.js"></script>
  <script type="text/html" id="laytplCont">
	{{#  layui.each(d.data,function(index,item){  }}
		<li style="border-bottom:1px solid #eee; margin:30px 0px 0px 0px">
			<span class="s1" >
				<a><img src="{{item.user.userPic}}" style="width:50px;height:50px;border-radius:50%"></a>
			</span>
			<span class="s2" >
				<a>{{item.user.userName}}</a>
				<a>{{item.comDate}}</a>
			</span>
			<span class="s3">
				<a>{{item.comContent}}</a>
			</span>
		</li>
	{{#  }) }}
  </script>
  <script type="text/javascript">
  function checkform() {
		if(${sessionScope.userName==null})	{
			alert("请先登录OR注册");
			return false;
		}else{
			return true;
		}
	}
	 layui.use(['element','laypage','jquery', 'laytpl'], function(){
	      	var element = layui.element;
	      	var laypage = layui.laypage;
	      	var $ = layui.$;
	      	var laytpl = layui.laytpl;
	      	var count;
	      	
	      	// 使用ajax加载数据，然后渲染数据（模板技术）
	      	loadPage = function(curr) {
	      		$.ajax({
	      			async: false, //同步
	      			url: '${base}/action/comment/list?id='+${article.artId},
	      			data: {limit:8, page:curr},
	      			dataType: 'json',
	      			success: function(data) {
	      				count = data.count;
	      				var tpl = $('#laytplCont').html();
	              		laytpl(tpl).render(data, function(html) {
	              			$('#list-cont').html(html);
	              		});
	      			}      			
	      		});	
	      	}
	      	loadPage(1);
	      	
	     	// 分页
	  		laypage.render({
	    		elem: 'demo',
	    		count: count,
	    		limit: 8,
	    		jump: function(obj, first) {
	    			if(!first) {
	    				loadPage(obj.curr);
	    			}
	    		}
	  		});
	     	
	    });
  </script>
</body>
</html>